<template>
  <div>
    <v-system-bar
      fixed
      v-if="showSystemBar"
      color="accent"
      lights-out
      style="height: 3vh"
    >
      <v-spacer></v-spacer>
      建议您使用Chrome浏览器或者Edge浏览器打开MindFall，否则可能出现部分资源加载不正确的情况。
      <v-spacer></v-spacer>

    </v-system-bar>
    <v-app-bar
      :style="{marginTop: margin}"
      v-if="this.$route.fullPath !== '/login' && !this.$route.query.MindFallTicket && displayBar"
      ref="appBar"
      v-scroll="onScroll"
      :elevation="(this.$route.fullPath === '/' && !isScrolling) ? 0 : 5"
      color="main_1"
      dense
      fixed
      flat
    >
      <v-row>
        <v-col cols="12" lg="2">
          <v-img src="../../../public/images/logo.png" width="10vw" style="margin: auto"></v-img>
        </v-col>
        <v-col cols="12" lg="5">
          <v-row>
            <v-col cols="12" lg="2" style="text-align: center; margin-top: 1vh">
              <a
                @click="selected(0, '/')"
                style="font-family: 黑体,serif; font-size: 16px"
                :style="{
                  color: selecting===0?'#2C2E2D':'snow',
                  fontWeight: selecting===0?700:400
                }"
              >关于我们</a>
            </v-col>
            <v-col cols="12" lg="2" style="text-align: center; margin-top: 1vh">
              <a
                @click="selected(3, '/intelligent_guidance/info')"
                style="font-family: 黑体,serif;font-size: 16px"
                :style="{
                  color: selecting===3?'#2C2E2D':'snow',
                  fontWeight: selecting===3?700:400
                }"
              >创新引导</a>
            </v-col>
            <v-col cols="12" lg="2" style="text-align: center; margin-top: 1vh">
              <a
                @click="selected(4, '/idea_submission')"
                style="font-family: 黑体,serif; font-size: 16px"
                :style="{
                  color: selecting===4?'#2C2E2D':'snow',
                  fontWeight: selecting===4?700:400
                }"
              >创意发布</a>
            </v-col>
            <v-col cols="12" lg="2" style="text-align: center; margin-top: 1vh">
              <a
                @click="selected(1, '/solution_community')"
                style="font-family: 黑体,serif; font-size: 16px"
                :style="{
                        color: selecting===1?'#2C2E2D':'snow',
                        fontWeight: selecting===1?700:400
                      }"
              >解决方案</a>
            </v-col>
            <v-col cols="12" lg="2" style="text-align: center; margin-top: 1vh">
              <a
                @click="selected(2, '/creativity_community')"
                style="font-family: 黑体,serif; font-size: 16px"
                :style="{
                        color: selecting===2?'#2C2E2D':'snow',
                        fontWeight: selecting===2?700:400
                      }"
              >创意社区</a>
            </v-col>
          </v-row>
        </v-col>

        <v-col cols="12" lg="5" style="text-align: right">
          <v-btn
            v-if="!loginState"
            text
            :loading="loading"
            style="font-family: '华文楷体',sans-serif; font-size: 18px; margin-right: 3vw; color: snow"
            @click="$router.push('/login')"
          >
            登录
          </v-btn>
          <v-row justify-lg="end" v-else>
            <v-col cols="12" lg="4">
              <div style="height: 100%">
                <a-badge style="margin-right: 2vw" :offset="[-8, 8]" :dot="showDot">
                  <a-button type="link"  @click="$router.push('/personal/message')">
                    <v-icon style="color: snow">mdi-bell-ring-outline</v-icon>
                  </a-button>
                </a-badge>
                <v-menu
                  open-on-hover
                  bottom
                  offset-y
                  close-delay="150"
                  :close-on-content-click="false"
                  transition="slide-y-transition"
                  nudge-bottom="5"
                  min-width="300"
                >
                  <template v-slot:activator="{ on, attrs }">
                    <v-avatar style="cursor: pointer"
                              :size="40"
                              v-bind="attrs"
                              v-on="on"
                    >
                      <img :src="userInfo.profilepic" alt="">
                    </v-avatar>
                  </template>

                  <v-list>
                    <v-list-item>
                      <v-list-item-avatar>
                        <img
                          :src="userInfo.profilepic"
                          alt=""
                        >
                      </v-list-item-avatar>
                      <v-list-item-content>
                        <v-list-item-title>{{userInfo.nickname}}</v-list-item-title>
                        <v-list-item-subtitle>{{userInfo.introduction}}</v-list-item-subtitle>
                      </v-list-item-content>
                    </v-list-item>
                    <v-divider></v-divider>
                  </v-list>
                  <v-list>
                    <v-list-item>
                      <v-btn
                        color="primary"
                        elevation="0"
                        style="width: 100%;"
                        rounded
                        @click="$router.push('/personal/user')"
                      >
                        <v-icon left>mdi-account</v-icon>
                        个人中心
                      </v-btn>
                    </v-list-item>
                    <v-list-item>
                      <v-btn
                        color="snow"
                        elevation="0"
                        style="width: 100%;"
                        rounded
                        @click="logout"
                      >
                        <v-icon left>mdi-logout</v-icon>
                        退出登录
                      </v-btn>
                    </v-list-item>
                  </v-list>
                </v-menu>
              </div>
            </v-col>
            <v-col cols="12" lg="2"></v-col>
          </v-row>
        </v-col>
      </v-row>
    </v-app-bar>
  </div>

</template>

<script>
  import request from "../../utils/request";

  export default {
    name: 'CoreAppBar',
    watch: {
      $route: {
        handler: function(val, oldVal){
          this.selecting = this.get_selecting()
        },
        // 深度观察监听
        deep: true
      }
    },
    created() {
      const ua = navigator.userAgent
      const isWindowsPhone = /(?:Windows Phone)/.test(ua)
      const isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone
      const isAndroid = /(?:Android)/.test(ua)
      const isFireFox = /(?:Firefox)/.test(ua)
      const isWechat = /(micromessenger)/i.test(ua)
      const isQQ = /(MQQBrowser)/i.test(ua)
      const isEdge = ua.indexOf("Trident") > -1
      const isChrome = /(?:Chrome|CriOS)/.test(ua)
      const isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid && !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua))
      const isPhone = /(?:iPhone)/.test(ua) && !isTablet

      if (isPhone || isAndroid || isSymbian || isTablet || isWechat || isQQ
        || 'Android' === navigator.platform
        || 'iPhone' === navigator.platform
        || 'iPod' === navigator.platform
        || 'iPad' === navigator.platform) {
        this.displayBar = false
        this.$router.push('/mobile404')
      }else {
        this.$messageBus.$on('dot', (dot) => this.showDot = dot)
        this.loading = true
        request.get('/user/getMyInfo').then(res => {
          this.loading = false
          if (res.code === '200'){
            this.userInfo = res.data
            this.loginState = true
            if (res.data.role === 'ROLE_ADMIN'){
              this.$router.push('/manager')
              this.displayBar = false
            }
          }
          else
            this.sendWarnMessage('欢迎使用MindFall，请登录')
        })
        request.get('/message/getUnReadCount').then(res =>{
          if (res.code === '200'){
            if (res.data > 0)
              this.showDot = true
          }
        })
      }
      if (!isChrome && !isEdge){
        this.showSystemBar = true
        this.margin = '3vh'
      }

    },
    mounted() {
      this.selecting = this.get_selecting()
    },

    data: () => ({
      showDot: false,
      AvatarUrl: '',
      margin: '0',
      showSystemBar: false,
      loading: false,
      userInfo: {},
      displayBar: true,
      loginState: false,
      fav: true,
      menu: false,
      message: false,
      hints: true,
      showLogo: true,
      isScrolling: false,
      selecting: 0,
      com: false
    }),

    methods: {

      onScroll() {
        const offset = window.pageYOffset
        this.isScrolling = offset > 50
        this.showLogo = offset > 200
      },
      selected(option, push) { //点击后样式
        this.selecting = option
        this.$router.push(push)
      },
      get_selecting() {
        switch (window.location.pathname) {
          case '/': return 0
          case '/creative404': return 2
          case '/solution404': return 1
          case '/idea_submission': return 4
          case '/intelligent_guidance': return 3
          case '/intelligent_guidance/info': return 3
          case '/intelligent_guidance/questions': return 3
          case '/intelligent_guidance/model': return 3
          case '/intelligent_guidance/retrieval': return 3
          case '/intelligent_guidance/solution_edit': return 3
          case '/personal': return -1
          case '/personal/solution': return -1
          case '/personal/note': return -1
          case '/personal/creativity': return -1
          case '/personal/guide': return -1
          case '/personal/user': return -1
          case '/personal/edit': return -1
          case '/userInfo': return -1
          case '/creativity_community': return 2
          case '/creativeInfo': return 2
          case '/solution_community': return 1
          case '/solutionInfo': return 1
          default: return -1
        }
      },
      logout(){
        localStorage.removeItem('mindfall-ticket')
        localStorage.removeItem('_u')
        window.location.href = '/'
      }
    },
  }
</script>

<style>
a:hover{
  color: #2C2E2D!important;
  font-weight: bold!important;
}
</style>
